﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" style="height:100%">
<head>
	<title>案件コスト状況検索</title>
	<jsp:include page="../basePage/head.jsp" />	  
    <script src="./js/util/globalajaxevent.js"></script>  
 	 <style>
		    .ui-datepicker-calendar {display: none;}
		     #currency{width:100px;} 
   	</style>
		    
	<script>
	 
		
	
	 $(function() {	
		 
		 var exportExcel = '${exportExcel}';
		 if (exportExcel=='true'){
			 $('#buttonExport').show();
		 }else{
		 	$('#buttonExport').hide();
		 }
		 
		//设置默认日期 
		//开始日期：上个月 结束日期 当前日期		
		var toDate = getLastMonth(); 
		var fromDate = getLastYearMonth();
		
		//日期选择框格式化 		
		 initDatepicker('dateFrom',fromDate);
		 initDatepicker('dateTo',toDate);
 
		 $("#currency").multiselect({selectedList: 1,header:false, multiple: false,noneSelectedText:""});
		 
		 $('#buttonSearch,#buttonExport').button();		 			
	 
		$("#buttonSearch" ).button().click(function( event ) {
			
			$('#BasicInfoTableA,#BasicInfoTableB,#BasicInfoTableC,#ExchangeRateGrid,#detailGrid').empty();
			
			 
			if ( $('#currency').val() == "rmb"){
			  	$('#ExchangeRateGrid').hide();
			 }else{
				 $('#ExchangeRateGrid').show();
			 }
				 
			 
			 $.ajax({
			        type: "POST",
			        async: true,
			        url:"caseCostQuery!refreshData.action",
			        data:$('#dataForm').serialize(),			         
					success: function (data) {
						
						if (data.tableData.BasicInfoTableA.length==0 ||
							data.tableData.BasicInfoTableB.length==0 || 
							data.tableData.BasicInfoTableC.length==0 ||
							data.tableData.ExchangeRate.length==0 ||
							data.tableData.GeneralSurvey.length==0 ){
							
							 $( "#noResult" ).dialog({modal:true});
								return;	}
						
						outputGrid('BasicInfoTableA',data.tableData.BasicInfoTableA,"基礎給料情報",false);
						outputGrid('BasicInfoTableB',data.tableData.BasicInfoTableB,"予想満負荷稼働情報",false);
						outputGrid('BasicInfoTableC',data.tableData.BasicInfoTableC,"その他支払情報",false);
						outputGrid('ExchangeRateGrid',data.tableData.ExchangeRate,"毎月為替レート情報",true);
						
						outputGrid('detailGrid',data.tableData.GeneralSurvey,"運用関連状況報告",false);
						
						
						var width=$("#BasicInfoTableA").width();     	  				      	
				     	$("#BasicInfoTableA_datagrid").setGridWidth(width);
				     	
				     	var width=$("#BasicInfoTableB").width();     	  				      	
				     	$("#BasicInfoTableB_datagrid").setGridWidth(width);
				     	
				     	var width=$("#BasicInfoTableC").width();     	  				      	
				     	$("#BasicInfoTableC_datagrid").setGridWidth(width);

				     	
				    	var width=$("#ExchangeRateGrid").width();     	  				      	
				     	$("#ExchangeRateGrid_datagrid").setGridWidth(width);
				     	
				     	
				    	var width=$("#detailGrid").width();     	  				      	
				     	$("#detailGrid_datagrid").setGridWidth(width);
				     	
						setColumnsNoSort("#BasicInfoTableA_datagrid");
						setColumnsNoSort("#BasicInfoTableB_datagrid");
						setColumnsNoSort("#BasicInfoTableC_datagrid");
						setColumnsNoSort("#ExchangeRateGrid_datagrid");
						setColumnsNoSort("#detailGrid_datagrid"); 
						
 					},
			        error: function (err) {
						alert(err);
			        }
				});	  	 		  		
		 }); 
		
		$( "#buttonExport").button().click(function( event ) {
			$('#dataForm').attr('action','caseCostExport!export.action').submit();
		});
	});
	 
	 
		function outputGrid(target,data,caption,hidden){		
	  		$('#' + target ).empty();  		  	
			if(data == null || data.length==0  ) return;
			
	   		var row =[];
			for(var i=0;i<data.length  ;i++){				 							
				row.push($("<tr></tr>"));				 
			}  ;
			
		   	$('#' + target).empty().append('<table style="float:inherit" id=' + target + '_datagrid><tbody></tbody></table>');
			var table = $('#' + target + ' tbody');

		    var j=0;
	  		$.each(data,function(key,value){
	  			var index=0;
	  			$.each(value,function(k,v){  			  			
	  				var th = $("<th id =" + index + " nowrap='nowrap'></th>");
	  				var td = $("<td nowrap='nowrap'></td>");  		
	  	  		    if (j ==0 ){		
						th.append(v);
	  	  	        	th.appendTo(row[j]);
	  	  	        }
	  	  		    else{					  	  				
	  	  				td.append(v);
	  	  				td.appendTo(row[j]);
	  	  		    }
	  	  	    	index++;
	  			});  			
	  			j++;
	  		});
	  		for(var i=0;i<row.length;i++){
	  			row[i].appendTo(table);			
			};		
			

			  var ColModel='';
				  var Colwidth = 0;
				  for(var i=0;i<data[0].length  ;i++){				 							
				   if ( ColModel.length>0){
					   ColModel += ',';} 
				
				       if (target== "ExchangeRateGrid"){
					       if (i==0){
					    	   Colwidth = 180;
					       } else {
					    	   Colwidth =60;
					       }
				       } else if (target== "detailGrid"){
					       if (i==0){
					    	   Colwidth = 76;
					        } else if (i==1) {
					    	   Colwidth =100;
					       }  else if (i==2) {
					    	   Colwidth =60;
					       }else {
					    	   Colwidth =65;
					       }
					    } else if(target == "BasicInfoTableA"){
						       if (i==0){
						    	   Colwidth = 68;
						       } else if (i==1) {
						    	   Colwidth =110;
						       }  else if (i==2) {
						    	   Colwidth =106;
						       }
						  }else if(target == "BasicInfoTableB"){
							  if (i==0){
						    	   Colwidth = 140;
						       } else if (i==1) {
						    	   Colwidth =100;
						       }  else if (i==2) {
						    	   Colwidth =80;
						       }
						  }else if(target == "BasicInfoTableC"){
							  if (i==0){
						    	   Colwidth = 140;
						       } else if (i==1) {
						    	   Colwidth =100;
						       }  else if (i==2) {
						    	   Colwidth =96;
						       }
						  }
				  
					   ColModel += '{name:"' +i +'", index: "' + i+ '", width: ' + Colwidth+', align: "center",sortable:false} '; 
				  }  ;
				  
  	  		//tableToGrid(target + ' table',{
     	  	   tableToGrid('#' + target+"_datagrid",{
	  			//datatype: "local",  
	  			autoWidth:true,	  			
	  			height: "100%",           	  	
	         	caption: caption,
				shrinkToFit: false,
			  	colModel:eval("([" + ColModel + "])")
				,gridComplete:function(){				
					 paintColor(target);				  
				 }
     	  	   ,hiddengrid: hidden
	  		  });       
		};	
	  	
	  	function paintColor(target){  		  	
	  		$('#' + target + '_datagrid tr').each(function(){
	  			
	  			if (target.substring(0,14) == "BasicInfoTable"){
					var v=$(this).children("td:first").text();
					var color='';
					if (v=="平均" ||
						v == "予想満負荷稼働率") {
			    		color ="#99ccff";
			    	}   
					$(this).children("td:first").css("background",color);			
					$(this).children("td").eq(1).css("background",color);
					$(this).children("td").eq(1).css("text-align",'center');
					$(this).children("td").eq(2).css("text-align",'right');
	  			}
				if (target=="detailGrid"){
					
					//set all td align right
					//第三列以后 右对齐
					 $(this).children("td").eq(1).css("text-align",'left');
				    $(this).children("td").eq(2).nextAll().css("text-align",'right');
				    $(this).children("td").eq(2).css("text-align",'center');
				    
					var color=''; 
					var v=$(this).children("td").eq(1).text();
					if ( v=="在職人数" ||
						 v=="予定合計出勤"||
						 v=="実際総出勤" ||
						 v=="平日出勤" ||
						 v=="平日殘業(1.5倍)" ||
						 v=="土日殘業(2倍)" ||
						 v=="CHN祝日殘業(3倍)" ||
						 v=="サーバ(物理)"  ) {
					   		color = "#e5ffe5";}
					else if(v=="予定支出(OP)" ||
							v=="予定支出(瀋陽E)" ||
							v=="サーバ" ||
							v=="福利厚生" ||
							v=="福利手当て" ||
							v=="その他(間接価格)" ||
							v=="その他(割り掛け)" ||
							v=="合計" )  { 
							//color = "#ffff99";
						color = "#ffffbb";
							}
					else if(v=="予定入力可能" ||
							v=="実際処理合計" ||
							v=="OPリソース利用率1" ||
							v=="OPリソース利用率2" )
						  { //color = "#ffcc99";
							color = "#FFE0BD";
						  }
					 
					$(this).children("td") .css("background",color);
			 
				  
				}
				if (target=="ExchangeRateGrid"){
					$(this).children("td").eq(0).css("text-align",'center');
					$(this).children("td").eq(0).nextAll().css("text-align",'right');
				    //$(this).children("td").eq(2).css("text-align",'center');
				}
			});	
	  		 
	  	};
	  	
	  	
 			  	
	</script>

</head>

<body>

<s:form id="dataForm" theme="simple" >			
	<table style="white-space:nowrap">
		<tr>
			<th>貨幣</th>
			<td ><select id="currency" name="currency" >
				<option value ="rmb">人民元</option>	
				<option value ="jpy">日本円</option>
				 
				 </select>
			</td>	
		 	<th>時間帯</th><td ><s:textfield id="dateFrom" name="dateFrom" key="value" label="开始日" cssClass="datebox"/></td>
		 	<th>  ～</th> <td ><s:textfield id="dateTo" name="dateTo" key="value" label="结束日" cssClass="datebox" /></td>
			<td width=30></td>
			<td><a id="buttonSearch" href="#" class="button" >検索</a></td>
			<td><a id="buttonExport" href="#" style="width:100px" class="button"  >エクスポート</a></td>			
			<td>
				<span id="myIndicator" >
					<img  width=25 height=20 src="./img/ajax-loader.gif" alt="ロード中..." />ロード中....
				</span>
			 </td>		
		</tr>
	</table>
</s:form>

<hr>

<div id="dataContainer" style="position:absolute;overflow: auto!important;top:35px;bottom:0px;width:100%;">    			
 		<div id="BasicInfoTableA"   class="grid" style="margin-bottom:10px;margin-left:10px;margin-right:4px;width:28%;float:left;"></div>		
		<div id="BasicInfoTableB"   class="grid" style="margin-bottom:10px;margin-left:2px;margin-right:4px;width:33%;float:left;"></div>	    
 		<div id="BasicInfoTableC"    class="grid" style="margin-bottom:10px;margin-left:2px;margin-right:4px;width:33%;float:left;" ></div> 
		
		<div id="ExchangeRateGrid"  style="clear:both;"  class="grid" ></div>
		<div id="detailGrid"  style="clear:both;" class="grid"></div>
		
		<div id="noResult" title="メッセージ" style="display:none;">
 			 <p>该当する検索结果がありません。</p>
 			 <p>别の条件でもう一度検索してください。</p>
		</div>
 </div> 

</body>  
</html>